<template>
  <div class="add" v-loading="isAddLoading" element-loading-text="正在提交数据...">
    <div class="title">请进行验收工艺配置</div>

    <div class="form">
      <template v-if="planList.length">
        <div v-for="item in planList" :key="item.standardId">
          <div class="form-title">{{ item.standardName }}</div>
          <div class="form-item" v-for="subItem in item.children" :key="subItem.standardId">
            <div class="sub-title">{{ subItem.standardName }}</div>
            <el-select v-model="subItem.selectedVal" placeholder="请选择">
              <el-option
                v-for="thTtem in subItem.children"
                :key="thTtem.standardId"
                :label="thTtem.standardName"
                :value="thTtem.standardId"
              />
            </el-select>
          </div>
        </div>
      </template>
      <el-empty v-else />
    </div>

    <div class="btns">
      <el-button type="primary" @click="onConfrim" :disabled="!planList.length">提交</el-button>
    </div>

    <el-dialog v-model="showWarnDialog" title="提示">
      <div class="warn-tips">
        <div class="icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="text">还有工序未完成工艺选择，请完成所有设置</div>
        <div class="btns">
          <el-button type="primary" plain @click="showWarnDialog = false">取消</el-button>
          <el-button type="primary" @click="showWarnDialog = false">知道了</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { editAcceptance } from "@/apis/clientManager";

const props = defineProps({
  planData: {
    type: Array,
    default: () => []
  },
  customerId: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["onConfrim"]);

const { proxy } = getCurrentInstance();

const showWarnDialog = ref(false);
const planList = props.planData || [];
let postData = [];
const isAddLoading = ref(false);
const checkData = () => {
  let count = 0;
  planList.forEach(item => {
    item.children?.forEach(subItem => {
      count++;
      subItem.selectedVal && postData.push({ craftId: subItem.selectedVal });
    });
  });
  if (count !== postData.length) {
    showWarnDialog.value = true;
    return false;
  }
  return true;
};
const onConfrim = async () => {
  try {
    postData = [];
    if (!checkData()) return;
    isAddLoading.value = true;
    await editAcceptance(props.customerId, postData);
    isAddLoading.value = false;
    proxy.$modal.msgSuccess("提交成功");
    emits("onConfrim");
  } catch (err) {
    isAddLoading.value = false;
  }
};
</script>
<style scoped lang="scss">
@use "@/assets/styles/mixin";
.add {
  @include mixin.flex-column;
  height: 100%;
  padding: 20px;

  .title {
    font-size: 18px;
    color: #131414;
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    &::before {
      content: "";
      width: 6px;
      height: 6px;
      background-color: #409eff;
      border-radius: 50%;
      margin-right: 5px;
      display: inline-block;
    }
  }

  .form {
    position: relative;
    flex: 1;
    overflow-y: auto;
    .form-title {
      font-size: 14px;
      color: #3d3d3d;
      margin: 20px 0px 15px 0px;
    }

    .form-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .sub-title {
        width: 60px;
        text-align: right;
        white-space: nowrap;
        margin-right: 10px;
        font-size: 14px;
        color: #86909c;
      }
    }
    :deep(.el-empty) {
      @include mixin.position-center;
    }
  }

  .btns {
    text-align: center;
    margin-top: 30px;
    :deep(.el-button) {
      width: 92px;
    }
  }
}
:deep(.el-select__wrapper) {
  background-color: #f5f7fa;
  box-shadow: none;
  color: #1a1a1a;
}
</style>
